<template>
<!--vue2.0需要根元素，vue3.0可以不用直接是代码片段 Fragment-->
<div>App
<p>{{$store.state.username}}</p>
<p>{{$store.getters.newName}}</p>
<p>{{$store.getters['newName']}}</p>
<button @click="newName1">修改</button>
</div>
</template>
<script>
import { useStore } from "vuex";
export default{
  name:'App',
  setup(){
    // 使用vuex仓库
  const store=useStore()
  // 1.使用根模块state的数据
  console.log(store.state.username)
  // 2.使用根模块getters的数据
  console.log(store.getters.newName)
  const newName1= ()=>{
    // 3.提交根模块mutations函数
    // store.commit('updateName')
    // 4.调用根模块actions函数
    store.dispatch('updateName')
  }
  return {newName1}
  }
}
</script>

